<template>
	<view>
		<un-login v-if="unLogin">您还没登录，请登录</un-login>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">首页</block>
		</cu-custom>
		<!-- 搜索 -->
		<view class="search">
			<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
		</view>
		<view class="">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item,index) in bannerList" :key="index">
					<view class="swiper-item">
						<image style="width: 100%;height: 100%;" :src="item.imgUrl || '../../static/img/build.png'"
							mode=""></image>
					</view>
				</swiper-item>
				<!-- <swiper-item>
					<view class="swiper-item">
						<image style="width: 100%;height: 100%;" src="../../static/img/build.png" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image style="width: 100%;height: 100%;" src="../../static/img/build.png" mode=""></image>
					</view>
				</swiper-item> -->
			</swiper>
		</view>
		<view class="content">
			<view class="item" v-for="(item,index) in list" :key="index"
				@tap.stop="navTo('/bbs/userType/userType?id=' + index)">
				<image :src="item.url" mode=""></image>
				<view>{{item.title}}</view>
			</view>
		</view>
		<view class="bottomText">
			<view class="bottomTitle">
				<view class="left">
					<image src="../../static/132.png" mode=""></image>
				</view>
				<view class="right">
					<view class="title">
						本地活动
					</view>
					<view class="textStyle">
						本地活动内容本地活动内容本地活动内容本地活动内容本地活动内容本地活动内容
					</view>
				</view>
			</view>
			<view class="bottomTitle">
				<view class="left">
					<image src="../../static/111.png" mode=""></image>
				</view>
				<view class="right">
					<view class="title">
						本地活跃
					</view>
					<view class="textStyle">
						本地活跃内容本地活跃内容本地活跃内容本地活跃内容本地活跃内容本地活跃内容本地活跃内容
					</view>
				</view>
			</view>
			<view class="bottomTitle">
				<view class="left">
					<image src="../../static/122.png" mode=""></image>
				</view>
				<view class="right">
					<view class="title">
						本地函告
					</view>
					<view class="textStyle">
						本地函告内容本地函告内容本地函告内容本地函告内容本地函告内容本地函告内容本地函告内容
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import list from '../../common/new.js'
	// 引入mescroll-mixins.js
	export default {
		data() {
			return {
				keyword: '',
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				unLogin: false,
				list: list,
				bannerList: [],
			}
		},
		onLoad: function(option) {},
		onShow() {
			this.ssuserid = getApp().globalData.ssuserid;
			this.unLogin = getApp().globalData.unLogin;
			if (this.ssuserid == '') {
				return false;
			}
			this.getBanner()
		},
		methods: {
			getBanner() {
				var that = this;
				uniCloud.callFunction({
					name: "banner",
					data: {
						cloudAction: "getList",
					},
					success(response) {
						that.bannerList = response.result.data
					},
					fail(err) {
						//  请求失败,隐藏加载状态
						console.log('请求失败', err);
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			return {
				title: '首页',
				path: "/pages/index/index"
			}
		},
		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			return {
				title: '首页',
				path: "/pages/index/index"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-item {
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin: 20upx;
		padding: 20upx;
		border-bottom: 2upx solid #c1c1c1;

		.item {
			text-align: center;
			width: 20%;

			image {
				height: 80upx;
				width: 80upx;
			}
		}
	}

	.search {
		margin: 20upx;
	}

	.bottomText {
		.bottomTitle {
			display: flex;
			margin: 20upx;
			height: 140upx;

			.left {
				margin: 20upx;
				height: 100upx;
				width: 100upx;
				border-radius: 20upx;

				image {
					height: 100upx;
					width: 100upx;
					border-radius: 20upx;
				}
			}

			.textStyle {
				font-size: 27upx;
				color: #b5b5b5;
				font-weight: 500;
			}

		}
	}
</style>
